<template>
  <div>
    <ele-form
      :disabled="disabled"
      :isResponsive="false"
      :inline="true"
      labelPosition="top"
      :formDesc="formDesc"
      :isShowSubmitBtn="false"
      :isShowErrorNotify="false"
      :isShowBackBtn="false"
      v-model="formData"
    ></ele-form>
  </div>
</template>

<script>
import { formatFieldComp } from '../../utils/index'
export default {
  data() {
    return {
      formDesc: {},
      formData: {},
      disabled: false
    }
  },
  props: {
    attributes: {
      type: Object,
      default: () => {}
    },
  },
  methods: {},
  watch: {
    attributes: {
      handler(newVal) {
        try {
          newVal.type === 9 ? this.disabled = true : this.disabled = false
          this.formDesc = formatFieldComp(newVal)
          if (this.formDesc.unique_key.default === '' || this.formDesc.unique_key.default === undefined) {
            this.formData.unique_key = ""
          }
        } catch (error) {
          console.error("Error updating formDesc:", error)
        }
      },
      immediate: true,
      deep: true,
    }
  },
}
</script>

<style lang="less" scoped>
/deep/.ele-form .titleComponent {
  font-weight: 700;
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  height: 30px;
  background-color: rgb(248,248, 249);
}
/deep/.el-radio-group {
  display: flex;
  flex-wrap: wrap;
  .el-radio {
    height: auto;
    width: 110px;
    padding: 10px 0;
    .el-radio__label {
      overflow-wrap: break-word;
      white-space: normal;
    }
  }
}
/deep/.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: -2px;
  .el-checkbox {
    // display: flex;
    height: auto;
    width: 110px;
    .el-checkbox__label {
      word-break: break-all;
      white-space: normal;
    }
  }
}
</style>